<template>
  <el-dialog
    v-model="state.dialogFormVisible"
    :title="t('signup.signupReview')"
    custom-class="dialog-min-width"
    :destroy-on-close="true"
  >
    <el-form ref="formRef" :model="formEdit" label-width="120px">
      <el-row>
        <el-col :lg="24" :md="24" :sm="24" :xs="24">
          <el-form-item :label="t('account.account')">
            {{ formEdit.account }}
          </el-form-item>
        </el-col>
        <el-col :lg="24" :md="24" :sm="24" :xs="24">
          <el-form-item :label="t('account.name')">
            {{ formEdit.name }}
          </el-form-item>
        </el-col>
        <el-col :lg="24" :md="24" :sm="24" :xs="24">
          <el-form-item :label="t('account.gender')">
            <el-tag size="small" v-if="formEdit.gender == 0">
              {{ t("account.genderFemale") }}</el-tag
            >
            <el-tag size="small" v-if="formEdit.gender == 1">
              {{ t("account.genderMale") }}</el-tag
            >
            <el-tag size="small" v-if="formEdit.gender == 2">
              {{ t("account.genderUnknown") }}</el-tag
            >
          </el-form-item>
        </el-col>
        <el-col :lg="24" :md="24" :sm="24" :xs="24">
          <el-form-item :label="t('signup.email')">
            {{ formEdit.email }}
          </el-form-item>
        </el-col>
        <el-col :lg="24" :md="24" :sm="24" :xs="24">
          <el-form-item :label="t('signup.reviewStatus')" maxlength="64">
            <el-radio-group v-model="formEdit.status" size="large">
              <el-radio-button label="0">{{
                t("signup.status0")
              }}</el-radio-button>
              <el-radio-button label="1">{{
                t("signup.status1")
              }}</el-radio-button>
              <el-radio-button label="2">{{
                t("signup.status2")
              }}</el-radio-button>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :lg="24" :md="24" :sm="24" :xs="24">
          <el-form-item :label="t('code.description')" maxlength="64">
            <el-input v-model="formEdit.description" type="textarea">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="state.dialogFormVisible = false">{{
          t("common.cancelButton")
        }}</el-button>
        <el-button type="primary" @click="handleSubmit">{{
          t("common.submitButton")
        }}</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import utils from "../../../../utils/utils";
import { useI18n } from "vue-i18n";
import apiAccount from "../../api/account";
const { t } = useI18n({ useScope: "global" });
const formRef = ref();

const formEditOriginal = () => {
  return {
    accountSignupId: "",
    account: "",
    name: "",
    gender: 2,
    email: "",
    status: 0,
    description: "",
  };
};
const formEdit = reactive(formEditOriginal());

const state = reactive({
  dialogFormVisible: false,
});

const emit = defineEmits<{
  (event: "on-submit-success", row: any): void;
}>();

const handleSubmit = async () => {
  apiAccount
    .changeSignupStatus(
      formEdit.accountSignupId,
      formEdit.status,
      formEdit.description
    )
    .then((response: any) => {
      if (response.data.code == 200) {
        state.dialogFormVisible = false;
        utils.infoNotification(t("common.submitSuccess"));
        emit("on-submit-success", formEdit);
      }
    })
    .catch((err: any) => {
      utils.errorNotification(t("common.submitException"), err);
    });
};

const show = (row: any) => {
  // console.log(row);
  Object.assign(formEdit, formEditOriginal());
  apiAccount
    .getAccountSignup(row.accountSignupId)
    .then((response: any) => {
      if (response.data.code == 200) {
        Object.assign(formEdit, response.data.data);
      }
    })
    .catch((err: any) => {
      utils.errorNotification(t("common.submitException"), err);
    });
  state.dialogFormVisible = true;
};

defineExpose({
  show,
});
</script>
